<%--
  Created by IntelliJ IDEA.
  User: 王文尧
  Date: 2024/7/12
  Time: 7:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="width: 1000px;margin: auto">
  学号: <input type="text" id="sno"/>
  姓名: <input type="text" id="sname"/>
  性别: <select id="sex">
    <option value="">不限</option>
    <option>男</option>
    <option>女</option>
  </select>
  年龄: <input id="age"/>
  <button onclick="query(1)">查询</button>
</div>
<table border="1" align="center" width="1000px" id="show">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>密码</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
</table>
<div style="width: 1000px;margin: auto">
  <div style="width: 1000px;margin: auto" id="showPageIndex">

  </div>
  <div style="float: left">
    跳转到<input type="number" id="jumpIndex"/>页<button onclick="jumpPageTo()">跳转</button>
    一页<select id="pageSize" onchange="query(1)">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>条
    总条数<span id="totalDataNum"></span>
    总页数<span id="totalPageNum"></span>
  </div>
</div>

<script type="text/javascript">
  query(1);
  function jumpPageTo() {
    var jumpIndex = document.getElementById("jumpIndex").value; // todo:后面再做校验
    query(jumpIndex);
    //location.href="manage?op=queryAllStudentsByPage&pageIndex=" + jumpIndex + "&pageSize=${pageInfo.pageSize}";
  }
  function query(index){
    var pageSize = document.getElementById("pageSize").value;

    var sNo = document.getElementById("sno").value;
    var sName = document.getElementById("sname").value;
    var sex = document.getElementById("sex").value;
    var age = document.getElementById("age").value;


    $.ajax({
      url:"manage",
      type:"post",
      data:{
        op:"queryAllStudentsByPageUsingAjax", // 说明一下，前面这些属性名省略了引号
        pageIndex:index, // 前面 是 将要传递到后台的js自定义对象的属性名  后一个 是 前面定义的 普通变量
        pageSize:pageSize,
        sNo:sNo,
        sName:sName,
        sex:sex,
        age:age
      },
      dataType:"JSON",
      success:function(data){
        var str = "<tr><th>学号</th><th>姓名</th><th>密码</th><th>性别</th><th>年龄</th></tr>";
        var dataList = data.data; // data.data 第一个 data 是后台返回的数据（该函数的参数），第二个 data 是 pageInfo 中的 data 属性
        for (var i = 0; i < dataList.length; i++) {
          str += "<tr><td>" + dataList[i].SNo + "</td><td>" + dataList[i].SName + "</td><td>" + dataList[i].password + "</td><td>" + dataList[i].sex + "</td><td>" + dataList[i].age + "</td></tr>";
        }
        document.getElementById("show").innerHTML = str;

        var str2 = "<a href='javascript:query(1)'>首页 </a>";

        // 上一页
        // 效果：在第一页时不能再点击上一页
        if (data.pageIndex > 1) {
          str2 += "<a href='javascript:query(" + (data.pageIndex-1) + ")'>上一页 </a>";
        } else {
          str2 += "上一页 ";
        }


        /* 具体页地址  怎么写？？？ for 循环*/
        for (var i = 0; i < data.totalPageNum; i++) {
          if (data.pageIndex == i+1){
            str2 += i+1 + " ";
          }else {
            str2 += "<a href='javascript:query(" + (i+1) + ")'>" + (i+1) + " </a>";
          }
        }

        // 下一页
        //  效果：在最后一页时不能再点击下一页
        if (data.pageIndex < data.totalPageNum) {
          str2 += "<a href='javascript:query(" + (data.pageIndex+1) + ")'>下一页 </a>";
        } else {
          str2 += "下一页 ";
        }
        str2 += "<a href='javascript:query(" + data.totalPageNum + ")'>尾页</a>";
        document.getElementById("showPageIndex").innerHTML = str2;

        // 显示在输入框中 第几页（当前页）
        document.getElementById("jumpIndex").value = data.pageIndex;

        // 显示 总条数和总页数
        document.getElementById("totalDataNum").innerText = data.totalDataNum;
        document.getElementById("totalPageNum").innerText = data.totalPageNum;
      }
    });


  }
</script>
</body>
</html>
